// 引用通用模型
@import '../../../common/less/module.less';

body{
    background-color: #c4c4c4;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
/*圆形，波纹放射效果*/
.circle{
    // 圆形颜色
    @_bgcolor: #fff;
    // 内圆大小，1号圆
    @_circle_inner: 100px;
    // 外圆大小，2号圆、3号圆
    @_circle_external: @_circle_inner * 4.5;
    // 始终让内圆保持居中定位
    @_top: (@_circle_external / 2)-(@_circle_inner / 2);
    @_left: @_top;
    // 动画名称，2号圆、3号圆
    @_name2: circle_2;
    @_name3: circle_3;
    // 动画每次运行时间
    @_time: 1.2s;
    // 初始化休眠时长，2号圆、3号圆
    @_sleep_time2: 0.6s;
    @_sleep_time3: 1.2s;
    position: relative;
    
    div{
        position: absolute;
    }
    &-1{
        /*画一个圆*/
        .circle(@_circle_inner,@_bgcolor);
        margin: @_top 0 0 @_left;
    }
    &-2{
        /*画一个圆*/
        .circle(@_circle_external,@_bgcolor);
        /*创建动画*/
        .animation(@_name2 @_time linear infinite);
        /*睡一会再执行*/
        .animat_sleep(@_sleep_time2);
        /*放射效果*/
        .animat_changeRadiate(@_name2);
    }
    &-3{
        /*画一个圆*/
        .circle(@_circle_external,@_bgcolor);
        /*创建动画*/
        .animation(@_name3 @_time linear infinite);
        /*睡一会再执行*/
        .animat_sleep(@_sleep_time3);
        /*放射效果*/
        .animat_changeRadiate(@_name3);
    }
}

